<template>
  <box title="今日统计">
    <div class="py-[28px] px-[48px] h-[152px]">
      <div class="flex justify-between">
        <div v-for="(item, index) in nowData" :key="index">
          <div class="w-[44px] h-[44px] mb-[10px] ml-[6px]">
            <img :src="item.img" alt="">
          </div>
          <div class="alltext mb-[12px]">
            {{ isNullOrEmpty( item.name ) }}
          </div>
          <div class="number gradients-text textBig text-center ">
            <div v-if="item.number <= 999"> {{ isNullOrEmpty( item.number ) }}</div>
            <div v-else>999+</div>
          </div>
        </div>
      </div>
    </div>
  </box>
</template>
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import box from '@/views/large-data-screen/component/box.vue'
import {screentoday} from '@/api/screen/largeData'
import img1 from '@/assets/screenimg/now.png'
import img2 from '@/assets/screenimg/now2.png'
import img3 from '@/assets/screenimg/now3.png'

const nowData = ref([
  {
    name: '告警次数',
    img: img1,
    number: 0
  },
  {
    name: '巡检任务',
    img: img2,
    number: 0
  },
  {
    name: '工单任务',
    img: img3,
    number: 0
  }

])
onMounted(() => {
  getscreentoday()
})
const getscreentoday = async () => {
  screentoday().then(res => {
    // console.log("今日统计", res)
    nowData.value[0].number = res.result.alarmCount
    nowData.value[1].number = res.result.inspectCount
    nowData.value[2].number = res.result.workOrderCount
  })
}
</script>
<style></style>
